<template>
  <div style="display: flex; gap: 20px; flex-direction: column">
    <el-card shadow="never">
      <template #header>效果展示</template>
      <div class="content">
        <echarts v-bind="data1" class="citem" />
        <echarts v-bind="data2" class="citem" />
      </div>
    </el-card>
    <el-card shadow="never">
      <template #header>
        <div class="header">
          效果展示
          <el-date-picker type="date" placeholder="选择日期" />
        </div>
      </template>
      <div class="content">
        <echarts v-bind="data3" class="citem" />
        <echarts v-bind="data4" class="citem" />
      </div>
      <el-table :data="[]" border>
        <el-table-column prop="date" label="日期" align="center" />
        <el-table-column prop="name" label="姓名" align="center" />
        <el-table-column prop="address" label="地址" align="center" />
      </el-table>
      <div class="pager-box">
        <el-pagination background layout="prev, pager, next" :total="1000" />
      </div>
    </el-card>
    <el-card shadow="never">
      <template #header>
        <div class="header">
          效果展示
          <el-date-picker type="date" placeholder="选择日期" />
        </div>
      </template>
      <div class="content">
        <echarts v-bind="data5" class="citem" />
        <echarts v-bind="data6" class="citem" />
        <echarts v-bind="data7" class="citem" />
      </div>
    </el-card>
  </div>
</template>
<script>
import echarts from './echarts.vue';
import { sleep } from '@/utils';

export default {
  components: {
    echarts
  },
  async mounted() {
    this.data1.loading = true;
    this.data2.loading = true;
    this.data3.loading = true;
    this.data4.loading = true;
    this.data5.loading = true;
    this.data6.loading = true;
    this.data7.loading = true;
    await sleep(3000);
    this.data1.data = [
      { value: 1048, name: '未创建' },
      { value: 735, name: '未发布' },
      { value: 280, name: '已发布' }
    ];
    this.data1.loading = false;
    this.data2.data = [
      { time: 'Mon', value1: 150, value: 820 },
      { time: 'Tue', value1: 212, value: 832 },
      { time: 'Wed', value1: 201, value: 901 },
      { time: 'Thu', value1: 154, value: 934 },
      { time: 'Fri', value1: 190, value: 1290 },
      { time: 'Sat', value1: 330, value: 1330 },
      { time: 'Sun', value1: 410, value: 1320 }
    ];
    this.data2.loading = false;
    this.data3.data = [
      { time: 'Mon', value: 150 },
      { time: 'Tue', value: 212 },
      { time: 'Wed', value: 201 },
      { time: 'Thu', value: 154 },
      { time: 'Fri', value: 190 },
      { time: 'Sat', value: 330 },
      { time: 'Sun', value: 410 }
    ];
    this.data3.loading = false;
    await sleep(2000);
    this.data7.data = [
      { value: 70, name: 'rose 1' },
      { value: 38, name: 'rose 2' },
      { value: 32, name: 'rose 3' },
      { value: 26, name: 'rose 6' },
      { value: 22, name: 'rose 7' },
      { value: 8, name: 'rose 8' }
    ];
    this.data4.loading = false;
    this.data5.loading = false;
    this.data6.loading = false;
    this.data7.loading = false;
  },

  data() {
    return {
      data1: {
        loading: true,
        type: 'pie',
        label: false,
        radius: [80, 140],
        color: ['#fd9539', '#20bd35', '#f00']
      },
      data2: {
        type: 'bar',
        color: ['#3398DB', '#fd9539'],
        yAxis: 'time',
        loading: true,
        field: [
          { key: 'value', stack: 'total', label: { show: true }, name: '未演练' },
          { key: 'value1', stack: 'total', label: { show: true }, name: '已演练' }
        ]
      },
      data3: {
        loading: true,
        type: 'bar',
        color: ['#3398DB', '#f00'],
        yAxis: 'time'
      },
      data4: {
        loading: true,
        type: 'bar',
        color: ['#20bd35'],
        xAxis: 'time',
        data: [
          { time: 'Mon', value: 150 },
          { time: 'Tue', value: 212 },
          { time: 'Wed', value: 201 },
          { time: 'Thu', value: 154 },
          { time: 'Fri', value: 190 },
          { time: 'Sat', value: 330 },
          { time: 'Sun', value: 410 }
        ]
      },
      data5: {
        loading: true,
        type: 'bar',
        color: ['#fd9539'],
        yAxis: 'time',
        data: [
          { time: 'Mon', value: 150 },
          { time: 'Tue', value: 212 },
          { time: 'Wed', value: 201 },
          { time: 'Thu', value: 154 },
          { time: 'Fri', value: 190 },
          { time: 'Sat', value: 330 },
          { time: 'Sun', value: 410 }
        ]
      },
      data6: {
        loading: true,
        type: 'pie',
        radius: 140,
        label: false,
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ]
      },
      data7: {
        loading: true,
        type: 'pie',
        roseType: 'area',
        radius: [40, 140],
        itemStyle: { borderRadius: 8 }
      }
    };
  }
};
</script>
<style scoped>
.pager-box {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.content {
  gap: 20px;
  height: 400px;
  display: flex;
}
.citem {
  flex: 1;
}
</style>
